<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        .menuItem {
            position: relative;
            /* 定位 */
            display: inline-block;
            /* 盒模型 */
            width: 30px;
            height: 14px;
            line-height: 14px;
            /* 居中 */
            overflow: hidden;
            /* 超出隐藏 */
            background-color: cadetblue;
            /* 主题背景色 */
            cursor: pointer;
            /* 鼠标样式  小手 */
        }

        .menuItem span {
            display: inline-block;
            /* 盒模型 */
            overflow: hidden;
            /* 超出隐藏 */
            white-space: nowrap;
            /*  */
            min-width: 150px;
            width: auto;
            height: 100%;
            text-overflow: ellipsis;
            /*超出字体隐藏  */
        }

        /* 动画 */
        @keyframes scrollItem {
            from {
                left: 0px;
            }

            to {
                left: -150px;
            }
        }

        .menuItem:hover span {
            position: absolute;
            width: auto;
            text-overflow: unset;
            overflow: visible;
            animation-timing-function: linear;
            animation: scrollItem 5s infinite;
        }
    </style>


<body>
    <div class="menuItem">
        <span>超长待机显示划入滚动文本</span>
    </div>
</body>
</head>
</html>